

<template>

    <div class="header-container flex-box">
        <div class="header-left">
            <el-icon class="icon" size="20" @click="menu.toggleCollapsed"><Fold /></el-icon>
            <!-- tab栏 -->
            <ul style="display: flex;align-items: center;height: 100%;">
                <li 
                    v-for="(item, index) in menu.selectMenu" :key="item.index"
                    style="display: flex;align-items: center;height: 100%;"
                    :class="{selected: route.path === item.path}"
                    class="tab"
                    >
                    <el-icon size="12"><component :is="item.icon"></component></el-icon>
                    <router-link class="text" :to="{path: item.path}">
                        <span>{{ item.name }}</span>
                    </router-link>
                    <!-- <el-icon class="icon" size="12"><CloseBold /></el-icon> -->
                    <el-icon 
                        size="12" 
                        :class="{close: !(route.path === item.path)}"
                        @click="closeTab(item, index)"
                        ><CloseBold /></el-icon>
                </li>
            </ul>
        </div>
        
        <div class="header-right"  >
            <el-dropdown @command="handleClick">
                <div class="flex-box">
                    <el-avatar
                        :src="userInfo.avatar"
                    />
                    <p>{{ userInfo.name }}</p>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                    <el-dropdown-item command="logout">登出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>

 
    
</template>

<script setup>
    import { useCounterStore } from '../stores/menu';
    import { useRoute, useRouter } from 'vue-router';

    const route = useRoute();
    const router = useRouter();
    console.log(route, 'route');

    const userInfo = JSON.parse(localStorage.getItem('userInfo'));
    console.log(userInfo, 'userInfo');
    
    
    const menu = useCounterStore();
    console.log(menu.selectMenu, 'selectMenu')
    
    function closeTab(item, index){
        console.log(index, '当前index');
        
        // 注意closeMenu之后menu.selectMenu.length会减少
        menu.closeMenu(item)
        // 设置新的高亮tag

        //如果删除的不是当前页，就不处理(这段不写也没事，默认就是这个效果)
        if(route.path !== item.path){
            return 
        }
        // 如果删除的是最后一项
        if(index === menu.selectMenu.length){
            // console.log(index, '当前index');

            // 如果tag只有一个(删除完了)，就跳转到首页
            // !menu.selectMenu.length
            if(index===0){
                router.push('/')
            }else{
                router.push({
                    path: menu.selectMenu[index-1].path
                })
            }
            
        }
        // else{
        //     // 如果删除的是中间的tag
        //     router.push({path:menu.selectMenu[index].path})

        // }
    }


    const handleClick = (command) => {
        if(command === 'logout'){
            localStorage.removeItem('token')
            localStorage.removeItem('userInfo')
            // 清除pinia持久化中的数据
            localStorage.removeItem('v3pz')

            // 跳转到登录页
            // router.push('/login')
            window.location.href = window.location.origin
        }
    }

</script>

<style scoped>
    .flex-box { 
        display: flex;
            justify-content: space-between;
            align-items: center;
    }

    .header-container {
        
        align-items: center;
        height: 100%;
        background-color: white;
        padding-right: 25px;
        .header-left {
            display: flex;
            align-items: center;
            height: 100%;
            .icon {
                cursor: pointer;
                width: 45px;
                height: 100%;
                
            }
            .icon:hover {
                background-color: #f5f5f5;
                /* cursor: pointer; */
            }
        }
        .header-right {
            display: flex;
            align-items: center;
            height: 100%;
            .el-avatar {
                margin-right: 10px;
            }
            p {
                margin-right: 10px;
            }
        }
        
    }

    

    .tab{
         padding: 0 10px;
         height: 100%;
         .text{
            margin: 0 5px;
         }
         .close {
            visibility: hidden;
        }
        /* less语法，&将selected与tab同级 */
        &.selected {
            background-color: #f5f5f5;
            cursor: pointer;
            i {
                color: #0052d9;

            }
            a {
                color: #0052d9;

            }
        }
        .text {
            text-decoration: none;
            color: inherit;
        }
            
    }

    .tab:hover {
        background-color: #f5f5f5;
        cursor: pointer;
        .close {
            visibility: inherit;
        }
    }

</style>
